<template>
  <div class="container">
    <custom-header title="巡检任务管理"></custom-header>
    <div class="content">
      <div class="filter">
        <!-- <div class="item"
             v-for="(item,index) in filterList"
             :key="index"> -->
        <el-row>
          <el-form ref="item"
                   :model="item"
                   label-width="150px"
                   v-for="(item,index) in filterList"
                   :key="index">
            <el-col :span="8">
              <el-form-item :label="item.label+':'">
                <el-select v-model="filter[item.prop]"
                           :placeholder="item.placeholder"
                           v-if="item.type === 'select'">
                  <el-option :label="option.label"
                             :value="option.value"
                             v-for="option in item.options"
                             :key="option.value"></el-option>
                </el-select>
                <el-date-picker class="date_picker"
                                v-else-if="item.type === 'daterange'"
                                v-model="filter[item.prop]"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-form>
          <el-col :span="16"
                  class="buttons">
            <el-button @click="reset">重置</el-button>
            <el-button type="primary"
                       @click="search">查询</el-button>
          </el-col>
        </el-row>
        <!-- <span class="label">{{ item.label }}：</span>
          <el-select v-model="filter[item.prop]"
                     :placeholder="item.placeholder"
                     v-if="item.type === 'select'"
                     :collapse-tags="true"
                     multiple>
            <el-option :label="option.label"
                       :value="option.value"
                       v-for="option in item.options"
                       :key="option.value"></el-option>
          </el-select>
          <el-date-picker class="date_picker"
                          v-else-if="item.type === 'daterange'"
                          v-model="filter[item.prop]"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
          </el-date-picker> -->
        <!-- </div> -->
        <!-- <div class="item">
          <el-button @click="reset">重置</el-button>
          <el-button type="primary"
                     @click="search">查询</el-button>
        </div> -->
      </div>
      <div class="action">
        <el-button type="primary"
                   icon="el-icon-plus"
                   @click="dialogVisible = true">新增巡检任务</el-button>
        <el-button icon="el-icon-refresh">同步巡检任务</el-button>
      </div>
      <div class="table">
        <customer-table :tableInfo="tableInfo"
                        @actionClick="tableActionClick"></customer-table>
      </div>
    </div>
    <custom-footer></custom-footer>

    <el-dialog :title="form[filterList[0].prop] ? '编辑巡检任务' : '新增巡检任务'"
               :visible.sync="dialogVisible"
               append-to-body
               custom-class="custom_dialog"
               width="60%">
      <div class="item_list">
        <div class="item"
             v-for="(item,index) in formList"
             :key="index">
          <span class="label">{{ item.label }}：</span>
          <el-upload v-if="item.type === 'upload'"
                     class="avatar-uploader"
                     action="https://jsonplaceholder.typicode.com/posts/"
                     :show-file-list="false">
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-date-picker class="date_picker"
                          v-else-if="item.type === 'daterange'"
                          v-model="form[item.prop]"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
          </el-date-picker>
          <el-input v-else
                    v-model="form[item.prop]"
                    placeholder="场景名称"
                    :disabled="item.disabled"></el-input>
        </div>
      </div>
      <span slot="footer"
            class="dialog_footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="dialogVisible = false">创 建</el-button>
      </span>
    </el-dialog>

    <el-dialog :title="actionDict[actionType] + '任务'"
               :visible.sync="tipsDialogVisible"
               append-to-body
               custom-class="custom_dialog"
               width="30%">
      <span>确认{{ actionDict[actionType] }}此任务？</span>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="tipsDialogVisible = false">确 定</el-button>
        <el-button @click="tipsDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog title="任务切换"
               :visible.sync="taskDialogVisible"
               append-to-body
               custom-class="custom_dialog"
               width="60%">
      <div class="dialog_filter">
        <div class="item">
          <span class="label">任务名称：</span>
          <el-input v-model="taskDialogFilter.name"
                    placeholder="请输入"></el-input>
        </div>
        <div class="item">
          <span class="label">任务编号：</span>
          <el-input v-model="taskDialogFilter.number"
                    placeholder="请输入"></el-input>
        </div>
        <div class="item">
          <el-button type="primary"
                     icon="el-icon-search"
                     @click="searchTask">查询</el-button>
        </div>
      </div>
      <div class="table">
        <customer-table :tableInfo="dialogTableInfo"
                        :selection="true"></customer-table>
      </div>
      <el-pagination :page-sizes="[100, 200, 300, 400]"
                     :page-size="100"
                     layout="total, prev, pager, next, jumper"
                     :total="400">
      </el-pagination>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="taskDialogVisible = false">确 定</el-button>
        <el-button @click="taskDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import customHeader from "@/pages/Robot/components/CustomHeader.vue";
import customerTable from "@/pages/Robot/components/CustomerTable.vue";
import customFooter from "@/pages/Robot/components/CustomFooter.vue";

export default {
  name: "PatrolInspectionTaskManagement",
  components: {
    customHeader,
    customerTable,
    customFooter
  },
  data () {
    return {
      filterList: [
        {
          label: "场景名称",
          prop: "sceneName",
          type: "select",
          placeholder: "请选择场景名称",
        },
        {
          label: "任务名称",
          prop: "taskName",
          type: "select",
          placeholder: "请选择任务名称",
        },
        {
          label: "机器人名称",
          prop: "robotName",
          type: "select",
          placeholder: "请选择机器人名称",
        },
        {
          label: "场景编号",
          prop: "sceneNumber",
          type: "select",
          placeholder: "请选择场景编号",
        },
        {
          label: "任务编号",
          prop: "taskNumber",
          type: "select",
          placeholder: "请选择任务编号",
        },
        {
          label: "机器人编号",
          prop: "robotNumber",
          type: "select",
          placeholder: "请选择机器人编号",
        },
        {
          label: "巡检计划开始时间",
          prop: "startTime",
          type: "daterange",
          placeholder: "请选择开始时间",
        },
      ],
      filter: {},
      dialogVisible: false,
      tipsDialogVisible: false,
      formList: [
        {
          label: "场景名称",
          prop: "sceneName",
          type: "input",
          placeholder: "待同步",
          disabled: true,
        },
        {
          label: "场景编号",
          prop: "sceneNumber",
          type: "input",
          placeholder: "待同步",
          disabled: true,
        },
        {
          label: "任务名称",
          prop: "taskName",
          type: "input",
          placeholder: "请输入",
        },
        {
          label: "任务编号",
          prop: "taskNumber",
          type: "input",
          placeholder: "待同步",
          disabled: true,
        },
        {
          label: "机器人名称",
          prop: "robotName",
          type: "input",
          placeholder: "待同步",
          disabled: true,
        },
        {
          label: "机器人编号",
          prop: "robotNumber",
          type: "input",
          placeholder: "待同步",
          disabled: true,
        },
        {
          label: "巡检计划开始时间",
          prop: "startTime",
          type: "daterange",
          placeholder: "待同步",
        },
        {
          label: "预计时长",
          prop: "duration",
          type: "input",
          placeholder: "待同步",
          disabled: true,
        },
        {
          label: "温度预警值（℃）",
          prop: "temperature",
          type: "input",
          placeholder: "请输入",
        },
        {
          label: "湿度预警值（%）",
          prop: "humidity",
          type: "input",
          placeholder: "请输入",
        },
        {
          label: "场景地图",
          prop: "map",
          type: "upload",
        },
      ],
      form: {},
      tableInfo: {
        column: [
          {
            label: "序号",
            prop: "index",
            type: "index",
            width: "50",
          },
          {
            label: "场景名称",
            prop: "sceneName",
            width: "120",
          },
          {
            label: "场景编号",
            prop: "sceneNumber",
            width: "120",
          },
          {
            label: "任务名称",
            prop: "taskName",
            width: "160",
          },
          {
            label: "任务编号",
            prop: "taskNumber",
            width: "120",
          },
          {
            label: "机器人名称",
            prop: "robotName",
            width: "150",
          },
          {
            label: "机器人编号",
            prop: "robotNumber",
            width: "150",
          },
          {
            label: "巡检计划开始时间",
            prop: "startTime",
            width: "240",
          },
          {
            label: "预计时长",
            prop: "duration",
            width: "150",
          },
          {
            label: "任务状态",
            prop: "taskStatus",
            width: "150",
          },
          {
            label: "操作",
            prop: "action",
            type: "PatrolInspectionTaskManagement",
          },
        ],
        data: [
          {
            sceneName: "场景1",
            sceneNumber: "CJ001",
            taskName: "任务1",
            taskNumber: "RW001",
            robotName: "测试1号",
            robotNumber: "CS001",
            startTime: "2022-10-25 23:12:56",
            duration: "2小时13分03秒",
            taskStatus: "执行中",
          },
          {
            sceneName: "场景1",
            sceneNumber: "CJ001",
            taskName: "任务1",
            taskNumber: "RW001",
            robotName: "测试1号",
            robotNumber: "CS001",
            startTime: "2022-10-25 23:12:56",
            duration: "2小时13分03秒",
            taskStatus: "执行中",
          },
          {
            sceneName: "场景1",
            sceneNumber: "CJ001",
            taskName: "任务1",
            taskNumber: "RW001",
            robotName: "测试1号",
            robotNumber: "CS001",
            startTime: "2022-10-25 23:12:56",
            duration: "2小时13分03秒",
            taskStatus: "执行中",
          },
          {
            sceneName: "场景1",
            sceneNumber: "CJ001",
            taskName: "任务1",
            taskNumber: "RW001",
            robotName: "测试1号",
            robotNumber: "CS001",
            startTime: "2022-10-25 23:12:56",
            duration: "2小时13分03秒",
            taskStatus: "执行中",
          },
          {
            sceneName: "场景1",
            sceneNumber: "CJ001",
            taskName: "任务1",
            taskNumber: "RW001",
            robotName: "测试1号",
            robotNumber: "CS001",
            startTime: "2022-10-25 23:12:56",
            duration: "2小时13分03秒",
            taskStatus: "执行中",
          },
        ],
      },
      actionType: null,
      actionDict: {
        start: "启动",
        pause: "暂停",
        continue: "继续",
        returnVoyage: "一键返航",
      },
      taskDialogVisible: false,
      taskDialogFilter: {
        name: '',
        number: '',
      },
      dialogTableInfo: {
        column: [
          {
            label: "序号",
            prop: "index",
            type: "index",
            width: "50",
          },
          {
            label: "场景名称",
            prop: "sceneName",
            width: "120",
          },
          {
            label: "场景编号",
            prop: "sceneNumber",
            width: "120",
          },
          {
            label: "任务名称",
            prop: "taskName",
            width: "160",
          },
          {
            label: "任务编号",
            prop: "taskNumber",
            width: "120",
          },
          {
            label: "机器人名称",
            prop: "robotName",
            width: "120",
          },
          {
            label: "机器人编号",
            prop: "robotNumber",
            width: "120",
          },
          {
            label: "巡检计划开始时间",
            prop: "startTime",
            width: "200",
          },
          {
            label: "预计时长",
            prop: "duration",
            width: "120",
          },
          {
            label: "任务状态",
            prop: "taskStatus",
            width: "120",
          },
        ],
        data: [
          {
            sceneName: "场景1",
            sceneNumber: "CJ001",
            taskName: "任务1",
            taskNumber: "RW001",
            robotName: "测试1号",
            robotNumber: "CS001",
            startTime: "2022-10-25 23:12:56",
            duration: "2小时13分03秒",
            taskStatus: "执行中",
          },
          {
            sceneName: "场景1",
            sceneNumber: "CJ001",
            taskName: "任务1",
            taskNumber: "RW001",
            robotName: "测试1号",
            robotNumber: "CS001",
            startTime: "2022-10-25 23:12:56",
            duration: "2小时13分03秒",
            taskStatus: "执行中",
          },
          {
            sceneName: "场景1",
            sceneNumber: "CJ001",
            taskName: "任务1",
            taskNumber: "RW001",
            robotName: "测试1号",
            robotNumber: "CS001",
            startTime: "2022-10-25 23:12:56",
            duration: "2小时13分03秒",
            taskStatus: "执行中",
          },
          {
            sceneName: "场景1",
            sceneNumber: "CJ001",
            taskName: "任务1",
            taskNumber: "RW001",
            robotName: "测试1号",
            robotNumber: "CS001",
            startTime: "2022-10-25 23:12:56",
            duration: "2小时13分03秒",
            taskStatus: "执行中",
          },
          {
            sceneName: "场景1",
            sceneNumber: "CJ001",
            taskName: "任务1",
            taskNumber: "RW001",
            robotName: "测试1号",
            robotNumber: "CS001",
            startTime: "2022-10-25 23:12:56",
            duration: "2小时13分03秒",
            taskStatus: "执行中",
          },
        ],
      },
    }
  },
  created () {
    // this.$notify({
    //   title: '新的任务',
    //   message: '有新的任务上传，请尽快同步信息！ 2022-11-22 10:45:06',
    //   type: 'warning'
    // });
  },
  methods: {
    reset () {
      this.filter = {}
    },
    search () {
      console.log(this.filter)
    },
    tableActionClick (row, action) {
      let specialAction = ["taskSwitch", "details"]
      if (!specialAction.includes(action)) {
        this.actionType = action
        this.tipsDialogVisible = true
      } else if (action === "taskSwitch") {
        this.taskDialogVisible = true
      } else if (action === "details") {
        this.$router.push({
          path: "/PatrolInspectionTaskManagementDetails",
          query: {
            id: row.id,
          },
        })
      }
      console.log(row, action)
    },
  }
}
</script>

<style lang="scss" scoped>
.el-input,
.el-select,
.el-date-editor {
  width: 100%;
}

.container {
  margin-bottom: 50px;

  .content {
    padding: 24px;

    .filter {
      .buttons {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-end;
      }
      //   display: flex;
      //   flex-wrap: wrap;
      //   justify-content: space-between;
      //   gap: 40px;

      //   .item {
      //     width: 30%;
      //     display: flex;
      //     align-items: center;
      //     justify-content: center;

      //     .label {
      //       width: 120px;
      //       text-align: end;
      //       margin-right: 10px;
      //       font-size: 13px;
      //       color: rgba(0, 0, 0, 0.85);
      //       font-weight: bold;
      //     }

      //     .el-input,
      //     .el-select,
      //     .el-date-editor {
      //       flex: 1;
      //     }

      //     .el-range-separator {
      //       width: 20px;
      //     }
      //   }

      //   .item:last-child {
      //     justify-content: end;
      //   }
    }

    .action {
      padding: 24px 0;

      .el-button:last-child {
        margin-left: 40px;
      }

      .el-button--default {
        color: #1890ff;
        border-color: #1890ff;
      }
    }
  }

  .el-button--primary {
    background-color: #1890ff;
    border-color: #1890ff;
    color: #fff;
  }
}
</style>
<style lang="scss">
.custom_dialog {
  .el-dialog__header {
    padding: 18px;
    text-align: center;
    background-color: #1890ff;

    .el-dialog__close,
    .el-dialog__title {
      color: white;
      font-weight: bold;
      font-size: 18px;
    }
  }

  .item_list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;

    .item {
      width: 48%;
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      padding: 0 20px;

      .label {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85);
        width: 140px;
        text-align: end;
      }

      .el-input,
      .el-date-editor {
        flex: 1;
      }

      .el-range-separator {
        width: 20px;
      }
    }

    .avatar-uploader {
      flex: 1;

      .el-upload:hover {
        border-color: #409eff;
      }

      .el-upload {
        width: 100%;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }

      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100%;
        height: 102px;
        line-height: 102px;
        text-align: center;
      }
    }
  }

  .dialog_filter {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .item {
      display: flex;
      align-items: center;
      width: 33%;

      .label {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85);
        width: 100px;
        text-align: end;
      }

      .el-input {
        flex: 1;
      }

      .el-button {
        margin-left: 50px;
      }
    }
  }

  .table {
    padding-top: 30px;
  }

  .el-dialog__footer {
    text-align: center;
    padding: 20px 0;

    .el-button--primary {
      margin-left: 50px;
    }
  }
}
</style>
